<template>
  <div id="login-top">
    <div>
      <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <template>
      <div>
        <div id="chars" ref="chart" style="width:80%;height:500px"></div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewDate: "",
      value1:"",
    }; //定义数据
  },
  mounted(){
  },
  watch: {
    // 每当 question 改变时，这个函数就会执行
    value1(newQuestion, oldQuestion) {
      console.log(document.getElementById("chars"))
      document.getElementById("chars").removeAttribute('_echarts_instance_')
      console.log(document.getElementById("chars"))
      this.getViewData()
    }
  },
  components: {
  },
  created() {
    this.getViewData()
  },
  methods: {
    getViewData(){
      let _this = this;
      _this.$http
          .post("/logView/queryByPage",{
            data:{
              date1: _this.value1[0],
              date2:_this.value1[1],
            },
            pageNo: 1,
            pageSize: 1000,

          })
          .then(function (response) {

            console.log(response.data.data)
            _this.viewDate=response.data.data
            _this.getEchartData()
          })

    },
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        var _this=this
        const option = {
          title: {
            text: '操作日志视图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['新增操作', '更新操作', '删除操作']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: this.viewDate[0]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '新增操作',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.viewDate[1]
            },
            {
              name: '更新操作',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.viewDate[3]
            },
            {
              name: '删除操作',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.viewDate[2]
            },
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    }
  }
};
</script>
<style>
</style>
